<template>
	<view class="height-screen" style="padding: 0;">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('group.release')}}</block>
		</cu-custom>
		<view class="flex flex-direction margin-ht" style="margin-top: 20rpx;">
			<text class="leftSoild text-xl text-black font-bold margin-bottom">
				<text class="text-red margin-right-xs">*</text>{{$t('public.title')}}
			</text>
			<u-input :placeholder="$t('public.placeholderContent')" v-model="title" :customStyle="inputStyle"></u-input>
			<text class="leftSoild text-xl text-black font-bold margin-tb">
				<text class="text-red margin-right-xs">*</text>{{$t('public.content')}}
			</text>
			<u-textarea v-model="content" :placeholder="$t('public.placeholderContent')" :customStyle="inputStyle" count
				maxlength="500"></u-textarea>
			<!-- 上传图片 -->
			<view class="">
				<view class="leftSoild text-xl text-black font-bold margin-tb">
					{{$t('public.img')}}
				</view>
				<uploadImg @sendImage="sendImage" @delImage="delImage" accept="image" :lang="lang" />
				<!-- <image src="@/static/img/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;"></image> -->
			</view>

			<!-- 上传视频 -->
			<view class="">
				<view class="leftSoild text-xl text-black font-bold margin-tb">
					{{$t('public.video')}}
				</view>
				<uploadImg @sendImage="sendVideo" @delImage="delVideo" accept="video" :num="1" :lang="lang" />
				<!-- <image src="@/static/img/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;"></image> -->
			</view>

		</view>
		<view class="" style="height: 200rpx;"></view>

		<view class="bottomContent">
			<view v-if="lang == 'en'" class="descText" style="margin-bottom: 20rpx;">
				Click Submit to agree to<text style="color: #06C168;margin-left: 5rpx;" @click="handleagreement">
					Publish Community Agreement </text>
			</view>

			<view v-else class="descText" style="margin-bottom: 20rpx;">
				点击提交即代表同意<text style="color: #06C168;" @click="handleagreement">
					《发布社区协议》 </text>
			</view>

			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;" @tap.stop="bbsEdit">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>

		<xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		bbsEdit
	} from '@/apis'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				uploadOptions: {
					url: 'http://cw3.a.hlidc.cn/api/uploadFile'
				},
				title: '',
				content: '',
				inputStyle: {
					background: '#FFFFFF',
					borderRadius: '20rpx'
				},
				images: [],
				videoFile: [],
				videoName: '',
				lang: null
			}
		},
		onLoad(option) {
			this.lang = uni.getStorageSync("lang")
			// console.log("lang", this.lang)
		},
		methods: {
			handleagreement() {
				uni.navigateTo({
					url: "/pages/group/agreement"
				})
			},
			sendImage(event, keyWord) {
				this.images = [...this.images, ...event.sendList.splice(0, event.fileListLen)]
			},
			delImage(e) {
				this.images.splice(e, 1)
			},
			sendVideo(event, keyWord) {
				this.videoFile = [...this.videoFile, ...event.sendList.splice(0, event.fileListLen)]
			},
			delVideo(e) {
				this.videoFile.splice(e, 1)
			},
			async bbsEdit() {
				await this.helper.checkForm([
					['string', this.title, this.$t('public.title')],
					['string', this.content, this.$t('public.content')],
				])
				await bbsEdit({
					title: this.title,
					content: this.content,
					images: this.images.join(','),
					video_files: this.videoFile.join(',')
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input,
	/deep/ .u-textarea {
		border: none !important
	}

	.bottomContent {

		position: fixed;
		bottom: 60rpx;
		left: 25rpx;
		right: 25rpx;

		.descText {
			width: 100%;
			text-align: center;
			font-size: 28rpx;

		}
	}
</style>